<template>
  <page-wrap
    :showTop="isShowTop"
    hide-tab
    back
    title="订单信息"
    :bg-color="uNavColor"
  >
    <view class="record-detail" v-if="hasData">
      <view style="margin-top: 200rpx; padding-bottom: 300rpx">
        <view class="user-info" v-if="originFrom == 'willService'">
          <image class="head-portrait" :src="userInfo.imageUrl" />
          <view class="user-name">{{ userInfo.userName }}</view>
        </view>
        <EstimateCard
          v-else
          ref="estimate"
          @closeEmitBtn="closeEmitBtn"
          :share="share"
          :isConsultant="false"
          :consultantName="consultantName"
          :payTime="itemInfo.payTime"
          :itemInfo="itemInfo"
          :finishServeClicked="isFinishServeClicked"
        />
      </view>
      <view class="bottom">
        <view class="product-info" @click="showPopup = true">
          <view class="info-left">
            <image class="header" :src="imageUrl" />
            <view class="info-detail">
              <view class="product-name">{{ itemInfo.rightProducts }}</view>
              <view class="product-desc">{{ itemInfo.productDesc }}</view>
            </view>
          </view>
          <img :src="arrowRight" class="arrow-right" />
        </view>
        <button
          class="finish-btn"
          v-if="showEmitButton && isFinishServeClicked == false"
          @click.native="finishServe"
        >
          提交
        </button>
        <view class="finish-content" v-else>感谢您对顾问的评价~</view>
      </view>
    </view>
    <Empty
      v-else
      :baseImg="emptyImg"
      text="你暂无可以评价的服务~"
      :fontWeight="400"
      class="empty"
    />
    <u-popup
      class="popup-info"
      v-if="showPopup"
      v-model="showPopup"
      :mask-close-able="false"
      :closeable="true"
      mode="bottom"
      border-radius="14"
      width="100%"
    >
      <view class="detail">
        <view class="title">商品信息</view>
        <view class="service-detail">
          <img
            class="left-logo"
            :src="itemInfo.personPhoto == '' ? imageUrl : itemInfo.personPhoto"
          />
          <view class="right-detail">
            <view class="top">
              <view class="name">{{ itemInfo.rightProducts }}</view>
              <view class="price"
                >实付：<span class="money-label">￥</span
                ><span class="number">{{ itemInfo.price }}</span></view
              >
            </view>
            <view class="middle">
              <view class="name"
                ><span v-html="itemInfo.productDesc"></span
              ></view>
              <view class="price"
                >原价<span class="money-label">￥</span
                ><span class="number">{{ itemInfo.originPrice }}</span></view
              >
            </view>
          </view>
        </view>
        <view class="grey-line"></view>
        <view class="other-detail">
          <view class="detail-content">
            <view class="left-title">实际付款</view>
            <view class="right-content">
              <span class="title">已优惠</span>
              <span class="price"
                >￥{{ itemInfo.originPrice - itemInfo.price }}</span
              >
              <span class="title" style="margin-left: 24rpx">合计</span>
              <span class="price"
                >￥<span class="price-plus">{{ itemInfo.price }}</span></span
              >
            </view>
          </view>
          <view class="detail-content">
            <view class="left-title">订单号</view>
            <view class="right-content" style="align-items: center">
              <span class="order-num">{{ itemInfo.orderNo }}</span>
              <view class="grey-clolumn"></view>
              <span
                class="copy-button"
                @click="copyTextToClipboard(itemInfo.orderNo)"
                >复制</span
              >
            </view>
          </view>
          <view class="detail-content">
            <view class="left-title">下单手机号</view>
            <view class="right-content" style="align-items: center">
              <span class="order-num">{{ itemInfo.personTelephone }}</span>
            </view>
          </view>
          <view class="detail-content">
            <view class="left-title">下单时间</view>
            <view class="right-content" style="align-items: center">
              <span class="order-num">{{ itemInfo.payTime }}</span>
            </view>
          </view>
          <view class="detail-content">
            <view class="left-title">支付方式</view>
            <view class="right-content" style="align-items: center">
              <span class="order-num">{{ itemInfo.payTypeName }}</span>
            </view>
          </view>

          <!-- <view class="detail-content">
            <view class="left-title">所属项目</view>
            <view class="right-content" style="align-items: center">
              <span class="order-num">{{ itemInfo.cardTypeName }}</span>
            </view>
          </view> -->
        </view>
      </view>
    </u-popup>
    <LoginDialog
      ref="loginDialog"
      @loginSuccessBack="loginSuccessBack"
    ></LoginDialog>
  </page-wrap>
</template>

<script>
import EstimateCard from '../cpn/estimateCard.vue';
import LoginDialog from '@/components/LoginDialog';
import Empty from '@/components/Empty.vue';

import { getPersonHasOrderRate } from '@/api/modules/orderManage.js';

export default {
  components: {
    EstimateCard,
    LoginDialog,
    Empty,
  },
  data() {
    return {
      arrowRight: this.$imgBaseSelf + 'common/arrow-right0712.png',
      isShowTop: false,
      emptyImg: this.$imgBaseSelf + 'common/empty.png',
      hasData: true,
      imageUrl:
        'https://img3.job1001.com/ypMp/elan/images/careerPath/jianliyouhua.png',
      isFinishServeClicked: false,
      showEmitButton: true,
      showPopup: false,
      itemInfo: {},
      consultantName: '',
      originFrom: '',
      share: {
        consultantId: uni
          .getStorageSync('consultantId')
          .replace('_consultant', ''),
        personId: uni.getStorageSync('person-id').slice(2),
        rateId: '',
        userName: '职才125461',
      },
      rcId: '',
      uNavColor: '#ffffff',
      userInfo: {
        imageUrl:
          'https://img200.yl1001.com/resume-profile/2024/04/27/d96e220b-f25c-4e7c-89b4-777cec5eefc0.jpg',
        userName: '职才125461',
      },
      recordDeatil: {
        rightProductList: [
          {
            productImg:
              'https://img200.yl1001.com/resume-profile/2024/04/27/d96e220b-f25c-4e7c-89b4-777cec5eefc0.jpg',
            productName: '简历优化',
            price: 199,
            originPrice: 299,
            productDesc: '30天保修，专家定制简历 1 份',
          },
        ],
        countPrice: 112,
        sumPrice: 199,
        orderNo: '2323323232656548545',
        date: '2024-04-11 13:30:30',
        payWay: '抖音支付',
        phone: '134165458455',
        redeemDate: '2024-04-11 13:30:30',
        belongObject: 'Q2C端',
        orderInfoJson: {
          personPhone: '134165458455',
        },
      },
    };
  },
  onLoad(opt) {
    this.itemInfo = JSON.parse(opt.itemInfo);
    console.log('this.itemInfo', this.itemInfo);
    this.itemInfo.estimateContext = '您对顾问满意吗？';
    this.consultantName = opt.consultantName;
    this.recordDeatil.rightProductList[0].productName =
      this.itemInfo.rightProducts;
    this.rcId = opt.rcId;
    this.originFrom = opt.originFrom;
  },
  onShow() {
    if (!uni.getStorageSync('person-id')) {
      this.$refs.loginDialog.setVisibility(true);
      return;
    } else {
      this.getPersonHasOrderRateFn();
    }
  },
  onPageScroll(e) {
    //滚动改变颜色
    if (e.scrollTop >= 30) {
      this.isShowTop = true;
    } else {
      this.isShowTop = false;
    }
  },
  mounted() {},
  methods: {
    async getPersonHasOrderRateFn() {
      const params = {
        personId: uni.getStorageSync('person-id').slice(2),
        orderId: this.itemInfo.orderId,
      };
      const res = await getPersonHasOrderRate(params);
      if (res.code == 200) {
        console.log('res', res);
        switch (res.data.resultType) {
          case '1':
            return;
          case '2':
            uni.showToast({
              title: '当前订单不可评价',
              icon: 'success',
              duration: 2000,
            });
            this.hasData = false;
            break;
          case '3':
            uni.showToast({
              title: '订单已评价，不可重复评价',
              icon: 'success',
              duration: 2000,
            });
            this.isFinishServeClicked = true;
            break;
          default:
            break;
        }
      }
    },
    loginSuccessBack() {
      this.getPersonHasOrderRateFn();
    },
    closeEmitBtn() {
      this.showEmitButton = false;
      this.isFinishServeClicked = true;
    },
    copyTextToClipboard(text) {
      uni.setClipboardData({
        data: text,
        success: function () {
          uni.showToast({
            title: '复制成功',
            icon: 'success',
            duration: 2000,
          });
        },
      });
    },
    finishServe() {
      this.$refs.estimate.finishEstimate();
    },
  },
};
</script>

<style lang="scss" scoped>
@font-face {
  font-family: 'D-DIN-PRO-700-Bold';
  /*定义字体名称*/
  src: url('https://img3.job1001.com/ypMp/elan/images/career/positionDictionary/D-DIN-PRO-700-Bold.ttf');
}

$img-base-person: $img-base + 'careerPath/';

.record-detail {
  width: 100%;
  height: 90vh;
  background-image: url($img-base + 'careerPath/redemptionActivationCodeBg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 0rpx 18rpx;
  margin-bottom: 260rpx;
  .user-info {
    width: 718rpx;
    height: 128rpx;
    padding: 20rpx;
    box-sizing: border-box;
    border-radius: 16rpx;
    background-color: #ffffff;
    // margin-top: 200rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    .head-portrait {
      width: 88rpx;
      height: 88rpx;
      border: 3rpx solid #e3e3e3;
      border-radius: 50%;
    }
    .user-name {
      font-family: PingFangSC, PingFang SC;
      font-weight: 800;
      font-size: 32rpx;
      color: #000000;
      margin-left: 24rpx;
    }
  }

  .detail {
    width: 718rpx;
    /* height: 704rpx; */
    background: #ffffff;
    border-radius: 16rpx;
    filter: blur(0px);
    margin-top: 16rpx;
    padding: 20rpx 20rpx 10rpx 20rpx;

    .title {
      font-size: 32rpx;
      color: #222222;
      font-family: D-DIN-PRO-700-Bold;
      font-weight: 700;
    }

    .service-detail {
      margin-top: 32rpx;
      display: flex;
      flex-direction: row;

      .left-logo {
        width: 148rpx;
        height: 148rpx;
        border-radius: 8rpx;
        background-size: 100% 100%;
      }

      .right-detail {
        margin-left: 24rpx;
        flex: 1;

        .top,
        .middle {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
        }

        .top {
          align-items: flex-end;

          .name {
            font-weight: 800;
            font-size: 30rpx;
            color: #333333;
            flex: 1;
          }

          .price {
            font-weight: 400;
            font-size: 26rpx;
            color: #222222;
            text-align: right;
            .money-label {
              font-size: 24rpx;
              color: #333333;
              font-family: D-DIN-PRO-700-Bold;
              font-weight: 700;
            }

            .number {
              color: #333333;
              font-size: 44rpx;
              font-family: D-DIN-PRO-700-Bold;
            }
          }
        }

        .middle {
          align-items: flex-start;
          margin-top: 12rpx;

          .name {
            font-size: 28rpx;
            color: #888888;
            font-weight: 400;
            width: 278rpx;
            /* 设置固定宽度 */
            word-wrap: break-word;
            /* 允许在单词内换行 */
          }

          .price {
            color: #bfbfbf;

            .money-label {
              font-size: 24rpx;
              color: #bfbfbf;
              font-family: D-DIN-PRO-700-Bold;
              font-weight: 700;
            }

            .number {
              color: #bfbfbf;
              font-size: 44rpx;
              font-family: D-DIN-PRO-700-Bold;
            }
          }
        }
      }
    }

    .grey-line {
      width: 100%;
      height: 1.6rpx;
      background-color: #eaeaea;
      margin-top: 30rpx;
    }

    .other-detail {
      margin-top: 46rpx;

      .left-title {
        font-weight: 400;
        font-size: 30rpx;
        color: #999999;
      }

      .detail-content {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin-bottom: 46rpx;

        .right-content {
          display: flex;
          flex-direction: row;
          align-items: flex-end;

          .title {
            font-size: 24rpx;
            color: #222222;
          }

          .price {
            color: #fb5806;
            font-size: 26rpx;

            .price-plus {
              font-size: 48rpx;
              font-family: D-DIN-PRO-700-Bold;
            }
          }

          .order-num {
            font-weight: 400;
            font-size: 30rpx;
            color: #888888;
          }

          .grey-clolumn {
            width: 4rpx;
            height: 24rpx;
            background-color: #979797;
            margin: 0 20rpx;
          }

          .copy-button {
            font-weight: 400;
            font-size: 30rpx;
            color: #222222;
          }
        }
      }
    }
  }
  .bottom {
    width: 100%;
    height: 290rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #ffffff;
    padding-top: 16rpx;
    z-index: 999;
    .product-info {
      margin: 0 auto;
      height: 81rpx;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      width: 686rpx;
      margin-bottom: 56rpx;
      .info-left {
        display: flex;
        flex-direction: row;
        .header {
          width: 81rpx;
          height: 81rpx;
          margin-right: 20rpx;
        }
        .info-detail {
          display: flex;
          flex: 1;
          width: 550rpx;
          flex-direction: column;
          justify-content: space-between;
          .product-name {
            font-family: PingFang-SC, PingFang-SC;
            font-weight: 800;
            font-size: 30rpx;
            color: #333333;
          }
          .product-desc {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #888888;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
      .arrow-right {
        width: 32rpx;
        height: 32rpx;
        color: #000000;
      }
    }
    .finish-btn {
      width: 686rpx;
      height: 80rpx;
      background: #f75a3e;
      border-radius: 200rpx;
      margin: 0 auto;
      text-align: center;
      line-height: 80rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #ffffff;
    }
    .finish-content {
      width: 686rpx;
      height: 80rpx;
      text-align: center;
      line-height: 80rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 800;
      font-size: 28rpx;
      color: #000000;
    }
  }
}
.empty {
  margin-top: 200rpx;
}
.popup-info {
  z-index: 999;
  .detail {
    width: 718rpx;
    /* height: 704rpx; */
    background: #ffffff;
    border-radius: 16rpx;
    filter: blur(0px);
    margin-top: 16rpx;
    padding: 20rpx 20rpx 10rpx 20rpx;

    .title {
      font-size: 32rpx;
      color: #222222;
      font-family: D-DIN-PRO-700-Bold;
      font-weight: 700;
    }

    .service-detail {
      margin-top: 32rpx;
      display: flex;
      flex-direction: row;

      .left-logo {
        width: 148rpx;
        height: 148rpx;
        border-radius: 8rpx;
        background-size: 100% 100%;
      }

      .right-detail {
        margin-left: 24rpx;
        flex: auto;
        width: 200rpx;

        .top,
        .middle {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
        }

        .top {
          align-items: flex-end;

          .name {
            font-weight: 800;
            font-size: 30rpx;
            color: #333333;
            width: 320rpx;
          }

          .price {
            font-weight: 400;
            font-size: 26rpx;
            color: #222222;
            width: 210rpx;
            text-align: right;

            .money-label {
              font-size: 24rpx;
              color: #333333;
              font-family: D-DIN-PRO-700-Bold;
              font-weight: 700;
            }

            .number {
              color: #333333;
              font-size: 44rpx;
              font-family: D-DIN-PRO-700-Bold;
            }
          }
        }

        .middle {
          align-items: flex-start;
          margin-top: 12rpx;

          .name {
            font-size: 28rpx;
            color: #888888;
            font-weight: 400;
            width: 278rpx;
            /* 设置固定宽度 */
            word-wrap: break-word;
            /* 允许在单词内换行 */
          }

          .price {
            color: #bfbfbf;

            .money-label {
              font-size: 24rpx;
              color: #bfbfbf;
              font-family: D-DIN-PRO-700-Bold;
              font-weight: 700;
            }

            .number {
              color: #bfbfbf;
              font-size: 44rpx;
              font-family: D-DIN-PRO-700-Bold;
            }
          }
        }
      }
    }

    .grey-line {
      width: 100%;
      height: 1.6rpx;
      background-color: #eaeaea;
      margin-top: 30rpx;
    }

    .other-detail {
      margin-top: 46rpx;

      .left-title {
        font-weight: 400;
        font-size: 30rpx;
        color: #999999;
      }

      .detail-content {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin-bottom: 46rpx;

        .right-content {
          display: flex;
          flex-direction: row;
          align-items: flex-end;

          .title {
            font-size: 24rpx;
            color: #222222;
          }

          .price {
            color: #fb5806;
            font-size: 26rpx;

            .price-plus {
              font-size: 48rpx;
              font-family: D-DIN-PRO-700-Bold;
            }
          }

          .order-num {
            font-weight: 400;
            font-size: 30rpx;
            color: #888888;
          }

          .grey-clolumn {
            width: 4rpx;
            height: 24rpx;
            background-color: #979797;
            margin: 0 20rpx;
          }

          .copy-button {
            font-weight: 400;
            font-size: 30rpx;
            color: #222222;
          }
        }
      }
    }
  }
}
</style>
